<template>
  <div class="pfather">
    <div class="writebox">
      <div class="left">
        <img src="../../assets/img/pet.png" alt="" />
      </div>
      <div class="firstdemo">
        <div>
          <div class="plogin">宠物管理系统</div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-row type="flex" justify="center">
              <el-col :span="5">
                <el-form-item label="用户名">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="5">
                <el-form-item label="密码">
                  <el-input v-model="form.password"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row type="flex" justify="center">
              <el-col :span="5">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">登陆</el-button>
                  <el-button @click="onRegister">注册</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { defineComponent } from "vue";

export default {
  name: "fisrtdemo",
  data() {
    return {
      form: {
        name: "",
        password: "",
        loginTime: new Date().getTime(),
        flag: false,
      },
    };
  },
  methods: {
    onSubmit() {
      let a = localStorage.getItem(this.form.name);
      if (JSON.parse(a).password == this.form.password) {
        this.form.flag = true;
      }
      if (this.form.flag) {
        this.$message({
          message: "登陆成功",
          type: "success",
        });
        this.$store.commit("changeLoginTime", this.form.loginTime);
        this.$store.commit("changeUserFlag", this.form.flag);
        this.$router.push({ path: "/Home" });
      } else {
        this.$message.error("登陆失败");
      }
    },
    onRegister() {
      this.$router.push({ path: "/register" });
    },
  },
};
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.pfather {
  background: url(../../assets/img/bg.png) no-repeat;
  background-size: 100%;
  display: flex;
  position: relative;
}
.writebox {
  display: flex;
  width: 855px;
  height: 508px;
  border: solid 1px #ccc;
  background-color: white;
  z-index: 99;
  margin-left: 300px;
  margin-top: 50px;
  border-radius: 10px;
  margin-bottom:90px;
}
.left {
  margin-top: 20px;
  margin-left: 50px;
  width: 300px;
  height: 400px;
}
.firstdemo {
  padding-top: 100px;
  margin-left: 40px;
}
img {
  display: block;
  width: 100%;
}
/deep/.el-col-5 {
  min-width: 300px;
}
.plogin {
  // padding-top: 200px;
  text-align: center;
  font-size: 2vw;
  margin-bottom: 20px;
}
</style>
